import { AtFloatLayout, AtTabBar, AtTabs, AtTabsPane, AtTimeline,AtCalendar,AtIcon } from "taro-ui"
import { View, Image } from '@tarojs/components'
import Taro, { getStorageSync, useDidShow } from '@tarojs/taro'
//import NavBar from "../../components/topbar/topbar";
import './Calendar.scss'
import { useEffect, useState } from "react"
import { values } from "lodash"


//图片

const Calendar = () => {

  // 浮动弹窗
  const [isOpened, setOpen] = useState(false)
  const [isOpened1, setOpen1] = useState(false)
  //上午晚的标签栏
  const tabList = [{ title: '上午' }, { title: '下午' }, { title: '晚上' }]
  const [time, setTime] = useState(0);
  //获取信息
  const [oneSelf, setOneself] = useState({})
  useDidShow(() => {
    // 数据测试通过用户名（后续需用特定的openid）
    const user = Taro.getStorageSync("userInfo")
    console.log("user:", user)
    //调用云函数，并获取指定的营养计划
    Taro.cloud.callFunction({
      name: "publication",
      data: {
        $url: "oneSelf",
        reception_person: user.nickName,
      }
    }).then(res => {
      setOneself(res.result.data.data[0])
    })
  })

  const handleClick = () => {
    Taro.navigateTo({
      url: '/pages/firstPage/firstPage'
    })
  }

  const onClick = (value) => {
    setTime(value);
  }

  //标记日期
  // const [mark,setMarks ] = useState([]);
  // const onDayLongClick =(value)=>{
  //   setMarks(value);
  // }
  const [current] = useState(2)

  const handleClick1 = (value) => {
    console.log("日历：", value)
    if (value === 0) {
      setOpen(!isOpened)
      setOpen1(false)
    }
    if (value === 1) {
      setOpen(false)
      setOpen1(!isOpened1)

    }
  }
  const toBack = () => {
    Taro.navigateBack().then()
  }

  return (
    <View className='Calendar'>
      <View className='AtTabBar-kuang'>
        <AtTabBar
          className="AtTabBar"
          fixed
          tabList={[
            { title: '营养计划', image: require("./image/rabit.jpg") },
            { title: '我的计划', image: require("./image/plan.jpg") }
          ]}
          onClick={handleClick1}
          current={current}
        />
      </View>
      <View className='top' >
        <View className='arrow' onClick={handleClick}  >
          <AtIcon value='chevron-left' size='20' onClick={handleClick} />
        </View>
        <View className='toptext'>定制计划</View>
        {/* <NavBar title="定制计划" back nback={toBack}/> */}
      </View>


      {/* 营养计划 */}
      <AtCalendar
        className='date'
        isVertical
        isSwiper
        hideArrow
        onDayClick={() => setOpen(!isOpened)}
      // onDayLongClick={() =>onDayLongClick}
      // marks={ [ { value: '2022/1/11' } ] }
      >
      </AtCalendar>


      <AtFloatLayout
        className="AtFloatLayout"
        isOpened={isOpened}
        onClose={() => setOpen(false)}
        title="营养计划"
      >

        {/* 上午晚的标签栏 */}

        <View className="AtAccordion">
          <AtTabs
            //  height='200px'
            //  tabDirection='vertical'
            current={time} tabList={tabList} onClick={onClick}>
            <AtTabsPane 
            className="box1"
            current={time} index={0} >

              {/* 上午 */}
              <AtTimeline
                  items={[
                    { title: 'oneSelf.night' },
                    { title: '7点胎教' },
                    { title: '8点吃营养餐' },
                    { title: '9点睡觉' }
                  ]}
                >
                </AtTimeline>
            </AtTabsPane>

            {/* 下午 */}
            <AtTabsPane 
            className="box1"
            current={time} index={1}>
                <AtTimeline
                  items={[
                    { title: 'oneSelf.night' },
                    { title: '7点胎教' },
                    { title: '8点吃营养餐' },
                    { title: '9点睡觉' }
                  ]}
                >
                </AtTimeline>
            </AtTabsPane>

            {/* 晚上 */}
            <AtTabsPane 
            className="box1"
            current={time} index={2}>
              {/* <View style='padding: 180px 57px;text-align: center;'> */}
                <AtTimeline
                  items={[
                    { title: 'oneSelf.night' },
                    { title: '7点胎教' },
                    { title: '8点吃营养餐' },
                    { title: '9点睡觉' }
                  ]}
                >
                </AtTimeline>
              {/* </View> */}
            </AtTabsPane>
          </AtTabs>
        </View>
      </AtFloatLayout>


      {/* "我的计划" */}
      <AtFloatLayout
        className="AtFloatLayout1"
        isOpened={isOpened1} onClose={() => setOpen1(false)}
        title="我的计划"
      >
        {/* 上午晚的标签栏 */}

        <View className="AtAccordion1">
          <AtTabs

            current={time} tabList={tabList} onClick={onClick}>
            <AtTabsPane current={time} index={0} >

              {/* 上午 */}
              <AtTimeline
                  items={[
                    { title: '去产检'},
                    { title: '做胎教' },
                    { title: '吃维生素' },
                    { title: '吃水果' },
                    { title: '睡觉' }
                  ]}
                >
                </AtTimeline>
            </AtTabsPane>

            {/* 下午 */}
            <AtTabsPane current={time} index={1}>
            <AtTimeline
                  items={[
                    { title: '去产检'},
                    { title: '做胎教' },
                    { title: '吃维生素' },
                    { title: '吃水果' },
                    { title: '睡觉' }
                  ]}
                >
                </AtTimeline>
            </AtTabsPane>

            {/* 晚上 */}
            <AtTabsPane current={time} index={2}>
              <AtTimeline
                  items={[
                    { title: '去产检'},
                    { title: '做胎教' },
                    { title: '吃维生素' },
                    { title: '吃水果' },
                    { title: '睡觉' }
                  ]}
                >
                </AtTimeline>
            </AtTabsPane>
          </AtTabs>
        </View>
      </AtFloatLayout>


    </View>

  )
}

export default Calendar
